<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {useUserStore} from "../stores/Aim.js"

const mapStore = useUserStore();

let map = null;
let entries = [
    {
        position:[108.830295,34.126501],
        style: [
            {
                label: { //文本标注
                content: "入口1", //文本内容
                position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
                minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
                },
            },
        ]
    },
    {
        position:[108.830989,34.126299],
        style: [
            {
                label: { //文本标注
                content: "入口2(露天宽阶梯)", //文本内容
                position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
                minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
                },
            },
        ]
    },
    {
        position:[108.831234,34.126204],
        style: [
            {
                label: { //文本标注
                content: "入口3", //文本内容
                position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
                minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
                },
            },
        ]
    },
    {
        position:[108.832006,34.125909],
        style: [
            {
                label: { //文本标注
                content: "入口4", //文本内容
                position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
                minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
                },
            },
        ]
    },
    // {
    //     position:[108.832453,34.125655],
    //     style: [
    //         {
    //             label: { //文本标注
    //             content: "入口5", //文本内容
    //             position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
    //             minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
    //             },
    //         },
    //     ]
    // },
    {
        position:[108.832721,34.125545],
        style: [
            {
                label: { //文本标注
                content: "入口5", //文本内容
                position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
                minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
                },
            },
        ]
    },
]

var zoomStyleMapping = {
  14: 0, //14-17级使用样式 0
  15: 0,
  16: 0,
  17: 0,
  18: 0, 
  19: 0,
  20: 0,
};

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "fa076ab5ead8fe78282b836e4f0f63d6",
  };
  AMapLoader.load({
    key: "d19500d6c0f6291ceb6506ecbd946a2b", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","ElasticMarker",'AMap.Geolocation','AMap.Walking'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
        map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 17, // 初始化地图级别
            center: [108.831906,34.125955], // 初始化地图中心点位置
        });
        mapStore.setMapInstance(AMap)
        mapStore.setMap(map)
        //入口
        for(let i=0;i<entries.length;i++){
            AMap.plugin(["AMap.ElasticMarker"], function () {
            var elasticMarker = new AMap.ElasticMarker({
            position: entries[i].position, //点标记位置
            styles: entries[i].style, //指定样式列表
            zoomStyleMapping: zoomStyleMapping, //指定 zoom 与样式的映射
        });
        map.add(elasticMarker); //添加到地图上
        map.setFitView(); //缩放地图到合适的视野级别
        });
        }
        //
        var geolocation = new AMap.Geolocation({
            timeout: 10000, // 设置定位超时时间，默认：无穷大
            offset: [10, 20],  // 定位按钮的停靠位置的偏移量
            zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            position: 'RB' //  定位按钮的排放位置,  RB表示右下
        })

        geolocation.getCurrentPosition(function(status,result){
        if(status=='complete'){
            onComplete(result)
        }else{
            onError(result)
        }

        AMap.plugin(['AMap.Walking'],function(){
            let walking = new AMap.Walking({
                map : map,
            })

            walking.search(mapStore.position,entries[0].position,function (status,result){
                if (status === 'complete') {
                    console.log('绘制步行路线完成')
                } else {
                    console.error('步行路线数据查询失败' + result)
                    console.log(mapStore.classroom)
                } 
            })
        })
        
  });

  function onComplete (data) {
    // data是具体的定位信息
    console.log("data ",data.position)
    mapStore.setPosition(data.position)
    console.log("set ",mapStore.position)
  }

  function onError (data) {
    // 定位出错
    alert(JSON.stringify(data));
    alert("定位出错, 请开启GPS")
  }


    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});


</script>

<template>
    <div id="parent">
        <div id="container"></div>
    </div>
</template>

<style scoped>
#container {
  width: 100vw;
  height: 350px;
    max-width: 100%;
}
@media (max-width: 768px) { /* 移动端样式 */
  #container {
    width: 300px;
  }
}

</style>
